<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>店铺详情</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/shopdetails.css">
    <script src="../js/jquery-2.2.3.min.js"></script>
    <script src="../js/rem.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-resource.min.js"></script>
</head>
<body style="background-color: #F5F5F5">
<div id="app">
    <div class="head">
        <a href="javascript:history.back(-1)">
            <div class="h-left"></div>
        </a>
        <div class="h-middle">{{account.shopName}}</div>
        <div class="h-right"></div>
    </div>
    <div style="height: .44rem;"></div>
    <div class="container">
        <div class="search_box">
            <input type="text" class="search_inp" placeholder="请输入搜索商品名称">
            <img src="../img/search_img.png" class="search_img" alt="">
        </div>
        <div class="fenlei_img">
            <img src="../img/fenlei_img.png" class="fenlei_img" alt="">
        </div>
        <div class="cont">
            <div class="cont_logo">
                <img :src="account.logo" alt="">
            </div>
            <div class="cont-text">
                <p class="c-p1">{{account.companyName}}</p>
                <p class="c-p2">客服电话：{{account.telephone}}</p>
                <p class="c-p3">地址：{{account.address}}</p>
            </div>
        </div>
    </div>
    <ul class="nav_ul">
        <li class="ul-item ul-item-active">本地商品</li>
        <li class="ul-item">商家</li>
    </ul>
    <div class="contBox">
        <div class="c-item hh">
            <div class="c-b-i" v-for="item in list" @click="tabClick" >
                <div class="i-img">
                    <img :src="item.goodsImg" :data-id="item.goodsId" class="goodsImg" alt="">
                </div>
                <p class="i-text">{{item.goodsName}}</p>
                <p class="i-money">￥{{item.shopPrice}}</p>
            </div>
        </div>
        <div class="c-item2 hh" style="padding: 0;display: none;">
            <div class="shop_box_text">
                <p class="s-b-t-p1">店家信息</p>
                <p class="s-b-t-p2">营业时间{{account.startTime}}</p>
                <!--<p class="s-b-t-p2">客服电话：0310-87366172  0310-63666783</p>-->
            </div>
            <div class="shop_box_cont">
                <div class="s-b-c-i">
                    <span class="left-sp">店铺分类</span>
                    <span class="right-sp">{{dpfl}}</span>
                </div>
                <div class="s-b-c-i">
                    <span class="left-sp">商家电话</span>
                    <span class="right-sp">{{account.telephone}}</span>
                </div>
                <div class="s-b-c-i">
                    <span class="left-sp">地址</span>
                    <span class="right-sp">{{account.address}}</span>
                </div>
            </div>
            <!--<div class="shop_box_cont" onclick="location.href='shopzizhi.html'">-->
                <!--<div class="s-b-c-i">-->
                    <!--<span class="left-sp">营业资质</span>-->
                    <!--<span class="right-sp">查看资质 <img src="../img/icon-right.png" class="icon-right" alt=""></span>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>
</div>

</body>
<script>
    function GetRequest() {
        //获取url中"?"符后的字串 
        var url = location.search;
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    var theRequest = GetRequest();
    $(document).ready(function () {
        $(".nav_ul li").mouseover(function () {
            //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
            var _index = $(this).index();
            //让内容框的第 _index 个显示出来，其他的被隐藏
            $(".contBox>.hh").eq(_index).show().siblings().hide();
            //改变选中时候的选项框的样式，移除其他几个选项的样式
            $(this).addClass("ul-item-active").siblings().removeClass("ul-item-active");
        });
    });
    new Vue({
        el:'#app',
        data :{
            account:{},
            list:[],
            dpfl: {}
        },

        mounted: function() {
            this.$nextTick(function () {
                this.$http.post(SURL + '/jfd/shopGoods/list', {
                    shopId :theRequest.id
                }, {
                    emulateJSON: true
                }).then(function (res) {
                    var _fenlei = res.data.industryName;
                    console.log(_fenlei);
                    this.dpfl = _fenlei;
                    var _this = res.data.shops;
                    this.account = _this;
                    var _this1 = res.data.list;
                    this.list = _this1;
                });

            })
        },
        methods: {
            tabClick: function (e) {
                var ee = e.target;
                var _goodsidNum = $(ee).attr('data-id');
                console.log($(ee));
                location.href='detail/shop-shangjia-detail.html?id='+_goodsidNum+'&goodsType='+theRequest.goodsType
            }
        }
    })
</script>
</html>

